<template>
  <div class="full-box">
    <v-chart class="chart" :option="chartOption" autoresize />
  </div>
</template>

<script>
import vChart from "vue-echarts";
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {cloneDeep} from 'lodash'
import {graphic} from "echarts";

export default {
  name: 'radar01',
  cnName: '基础雷达图',
  mixins: [refreshMixin],
  components: {vChart},
  data() {
    return {
      chartOption: {},
      cptData: []
    }
  },
  methods: {
    loadDataOk() {
      const attribute = this.option.attribute
      const clone = cloneDeep(attribute)
      const indicator = clone.radar.indicator

      const opt = {
        ...clone
      }
      opt.radar.radius = opt.radar.radius + '%'

      const legendData = []
      const sereisData = []

      this.cptData.forEach(item => {
        legendData.push(item.group)
        const value = []
        indicator.forEach(col => {
          value.push(item.data[col.prop])
        })

        sereisData.push({
          name: item.group,
          value: value
        })
      })

      let colors = clone.color

      if(clone.colorRange.show) {
        colors = attribute.colorRange.colors
        const len = colors.length
        if(len > 0) {
          sereisData.forEach((item, index) => {
            const color = colors[index % len]
            item.areaStyle = {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: color[0] },
                { offset: 0.4, color: color[1] },
                { offset: 1, color: color[2] }
              ])
            }
          })
        }
      }




      opt.legend.data = legendData
      opt.series[0].data = sereisData
      this.chartOption = opt
    }
  },
  watch: {
    'option.attribute': {
      handler(newVal) {
        this.loadDataOk(newVal)
      },
      deep: true
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>

</style>
